Логічні властивості CSS рівня 2: Створення справді глобального вебу з розширеною підтримкою режимів письма

Десятиліттями веб-розробники створювали макети, використовуючи лексику, що походить з фізичного світу: top, bottom, left, та right. Ми встановлювали margin-left, padding-top та border-right. Ця ментальна модель добре слугувала нам, коли веб був переважно середовищем з напрямком зліва-направо та згори-вниз. Однак веб — глобальний. Це платформа для всіх мов і культур, багато з яких не дотримуються цього простого напрямку потоку.

Такі мови, як арабська та іврит, пишуться справа-наліво. Традиційні японська та китайська можуть писатися вертикально, згори-вниз та справа-наліво. Нав'язування фізичної CSS-моделі «зліва-направо» цим системам письма призводить до зламаних макетів, негативного користувацького досвіду та купи додаткового коду для виправлень. Саме тут на допомогу приходять логічні властивості та значення CSS, що представляють фундаментальний зсув парадигми від фізичних напрямків до логічних, відносних до потоку. Хоча Рівень 1 заклав основу, Логічні властивості CSS рівня 2 довершують картину, надаючи інструменти, необхідні для створення справді універсальних інтерфейсів, що враховують режим письма.

Цей вичерпний посібник проведе вас у глибоке занурення в удосконалення, які приніс Рівень 2. Ми почнемо з повторення ключових концепцій, потім розглянемо нові властивості та значення, що заповнюють прогалини, і, нарешті, застосуємо все це на практиці, створивши компонент, який бездоганно адаптується до будь-якого режиму письма. Приготуйтеся назавжди змінити своє уявлення про CSS-верстку.

Коротке нагадування: Основні концепції логічних властивостей (Рівень 1)

Перш ніж ми зможемо оцінити доповнення в Рівні 2, ми повинні мати тверде розуміння основи, закладеної Рівнем 1. Вся система побудована на двох ключових поняттях: режим письма та результуючі блокова та рядкова осі.

Чотири режими письма

Властивість CSS writing-mode визначає напрямок розміщення тексту. Хоча ми часто сприймаємо значення за замовчуванням як належне, існує кілька значень, які кардинально змінюють потік контенту на сторінці:

• horizontal-tb: Це значення за замовчуванням для більшості західних мов. Текст тече горизонтально (рядкова вісь) зліва-направо (або справа-наліво залежно від напрямку), а рядки складаються згори-вниз (блокова вісь).
• vertical-rl: Використовується для традиційної східноазійської типографіки (наприклад, японської, китайської). Текст тече вертикально згори-вниз (рядкова вісь), а рядки складаються справа-наліво (блокова вісь).
• vertical-lr: Подібно до попереднього, але рядки складаються зліва-направо (блокова вісь). Менш поширений, але використовується в деяких контекстах, наприклад, у монгольському письмі.
• sidelong-rl / sidelong-lr: Це для специфічних випадків, коли потрібно розташувати гліфи на боці. Вони менш поширені в загальному веб-контенті.

Ключова концепція: блокова та рядкова осі

Це найважливіша концепція для розуміння. У логічному світі ми перестаємо думати про «вертикальне» та «горизонтальне» і починаємо мислити в термінах блокової та рядкової осей. Їхня орієнтація повністю залежить від writing-mode.

• Рядкова вісь — це напрямок, у якому тече текст в межах одного рядка.
• Блокова вісь — це напрямок, у якому складаються нові рядки.

Подивімося, як це працює:

• У стандартній англійській (writing-mode: horizontal-tb): рядкова вісь проходить горизонтально, а блокова вісь — вертикально.
• У традиційній японській (writing-mode: vertical-rl): рядкова вісь проходить вертикально, а блокова вісь — горизонтально.

Оскільки ці осі можуть змінюватися, такі властивості, як width та height, стають неоднозначними. width — це розмір уздовж горизонтальної осі чи рядкової? Логічні властивості вирішують цю неоднозначність. Тепер ми маємо start та end для кожної осі:

• block-start: «Верх» в англійській, але «праворуч» у вертикальній японській.
• block-end: «Низ» в англійській, але «ліворуч» у вертикальній японській.
• inline-start: «Ліворуч» в англійській, але «верх» у вертикальній японській.
• inline-end: «Праворуч» в англійській, але «низ» у вертикальній японській.

Відповідність фізичних та логічних властивостей (Рівень 1)

Рівень 1 запровадив повний набір відповідностей від фізичних до логічних властивостей. Ось кілька ключових прикладів:

• width → inline-size
• height → block-size
• min-width → min-inline-size
• max-height → max-block-size
• margin-left → margin-inline-start
• margin-right → margin-inline-end
• margin-top → margin-block-start
• margin-bottom → margin-block-end
• padding-left → padding-inline-start
• padding-top → padding-block-start
• border-right → border-inline-end
• border-bottom → border-block-end
• left / right (для позиціонування) → inset-inline-start / inset-inline-end
• top / bottom (для позиціонування) → inset-block-start / inset-block-end

Рівень 1 також дав нам корисні скорочення, як-от margin-inline (для start та end) та padding-block (для start та end).

Ласкаво просимо до Рівня 2: Що нового і чому це важливо

Хоча Рівень 1 був величезним кроком уперед, він залишив деякі помітні прогалини. Певні фундаментальні властивості CSS, такі як float, clear та resize, не мали логічних еквівалентів. Крім того, такі властивості, як border-radius, не можна було контролювати логічно, що змушувало розробників повертатися до фізичних властивостей для точного стильового оформлення. Це означало, що ви могли побудувати макет на 90% за допомогою логічних властивостей, але все одно потребували б фізичних перевизначень для різних режимів письма, що частково нівелювало мету.

Логічні властивості CSS рівня 2 безпосередньо вирішують ці недоліки. Йдеться не про впровадження радикально нової системи, а про завершення тієї, що була розпочата в Рівні 1. Це досягається двома основними способами:

1. Впровадження нових логічних властивостей та значень для старих функцій CSS, які були за своєю суттю фізичними (як float).
2. Додавання логічних відповідностей для складних скорочень, які раніше ігнорувалися (як border-radius).

З Рівнем 2 бачення повністю відносної до потоку системи стилів майже завершене, що дозволяє нам створювати складні, красиві та надійні компоненти, які працюють скрізь, для всіх, без хаків та перевизначень.

Глибокий аналіз: Нові логічні значення та властивості в Рівні 2

Розгляньмо найвпливовіші доповнення, які Рівень 2 приносить у наш набір інструментів розробника. Це інструменти, які заповнюють прогалини та дають змогу створювати справді універсальний дизайн компонентів.

Float та Clear: Логічна революція

Властивість float роками була наріжним каменем CSS-верстки, але її значення, left та right, є визначенням фізичного напрямку. Якщо ви обтікаєте зображення зліва від абзацу англійською мовою, це виглядає правильно. Але змініть напрямок документа на справа-наліво (RTL) для арабської, і зображення тепер знаходиться на «неправильній» стороні текстового блоку. Воно має бути праворуч, що є початком рядка.

Рівень 2 вводить два нових, логічних ключових слова для властивості float:

• float: inline-start; Це зміщує елемент до початку рядкового напрямку. У мовах LTR це ліворуч. У мовах RTL — праворуч. У режимі письма vertical-rl — це вгорі.
• float: inline-end; Це зміщує елемент до кінця рядкового напрямку. В LTR це праворуч. В RTL — ліворуч. У vertical-rl — це внизу.

Аналогічно, властивість clear, що використовується для контролю обтікання контенту навколо плаваючих елементів, отримує свої логічні відповідники:

• clear: inline-start; Очищує обтікання з боку inline-start.
• clear: inline-end; Очищує обтікання з боку inline-end.

Це кардинально змінює правила гри. Тепер ви можете створювати класичні макети із зображенням та обтіканням текстом, які автоматично адаптуються до будь-якого напрямку мови без жодного рядка додаткового CSS.

Розширений контроль з логічним Resize

Властивість resize, яка зазвичай використовується для textarea, дозволяє користувачам змінювати розмір елемента. Її традиційні значення — horizontal, vertical та both. Але що означає «горизонтальний» у вертикальному режимі письма? Це все ще означає зміну розміру вздовж фізичної горизонтальної осі, що може не відповідати намірам користувача чи дизайнера. Користувач, імовірно, хоче змінити розмір елемента вздовж його рядкової осі, щоб зробити рядки довшими або коротшими.

Рівень 2 вводить логічні значення для resize:

• resize: inline; Дозволяє змінювати розмір уздовж рядкової осі.
• resize: block; Дозволяє змінювати розмір уздовж блокової осі.

Використання resize: block; на textarea в англійській мові дозволяє користувачеві зробити його вищим. Використання його у вертикальному режимі письма дозволяє користувачеві зробити його ширшим (що є блоковим напрямком). Це просто працює.

`caption-side`: Логічне позиціонування для заголовків таблиць

Властивість caption-side визначає розміщення caption таблиці. Старі значення були top та bottom. Знову ж таки, вони фізичні. Якщо намір дизайнера — розмістити заголовок «перед» вмістом таблиці, top працює для горизонтальних режимів письма. Але в режимі vertical-rl «початок» блокового потоку знаходиться праворуч, а не вгорі.

Рівень 2 надає логічне рішення:

• caption-side: block-start; Розміщує заголовок на початку блокового потоку.
• caption-side: block-end; Розміщує заголовок у кінці блокового потоку.

`text-align`: Фундаментальне логічне значення

Хоча значення start та end для text-align існують вже давно, вони є основною частиною філософії логічних властивостей і варті того, щоб на них наголосити. Використання text-align: left; є поширеною помилкою, яка негайно викликає проблеми з версткою в мовах RTL. Правильний, сучасний підхід — завжди використовувати:

• text-align: start; Вирівнює текст по початку рядкового напрямку.
• text-align: end; Вирівнює текст по кінцю рядкового напрямку.

Перлина Рівня 2: Логічний `border-radius`

Мабуть, найважливішим і найпотужнішим доповненням у Рівні 2 є набір властивостей для логічного керування радіусами заокруглення меж. Раніше, якщо ви хотіли, щоб картка мала заокруглені кути лише «зверху», ви б використовували border-top-left-radius та border-top-right-radius. Це повністю ламається у вертикальному режимі письма, де «верхні» кути тепер є кутами start-start та end-start.

Рівень 2 вводить чотири нові повні властивості, які відповідають чотирьом кутам елемента відносно потоку. Угода про іменування така: border-[block-edge]-[inline-edge]-radius.

• border-start-start-radius: Кут, де зустрічаються сторони block-start та inline-start.
• border-start-end-radius: Кут, де зустрічаються сторони block-start та inline-end.
• border-end-start-radius: Кут, де зустрічаються сторони block-end та inline-start.
• border-end-end-radius: Кут, де зустрічаються сторони block-end та inline-end.

Спочатку це може бути складно уявити, тому давайте розглянемо це для різних режимів письма:

Відповідність `border-radius` у `writing-mode: horizontal-tb` (напр., англійська)

• border-start-start-radius відповідає top-left-radius.
• border-start-end-radius відповідає top-right-radius.
• border-end-start-radius відповідає bottom-left-radius.
• border-end-end-radius відповідає bottom-right-radius.

Відповідність `border-radius` у `writing-mode: horizontal-tb` з `dir="rtl"` (напр., арабська)

Тут рядковий напрямок перевернутий.

• border-start-start-radius відповідає top-right-radius. (Block-start — це верх, inline-start — це праворуч).
• border-start-end-radius відповідає top-left-radius.
• border-end-start-radius відповідає bottom-right-radius.
• border-end-end-radius відповідає bottom-left-radius.

Відповідність `border-radius` у `writing-mode: vertical-rl` (напр., японська)

Тут обидві осі повернуті.

• border-start-start-radius відповідає top-right-radius. (Block-start — це праворуч, inline-start — це верх).
• border-start-end-radius відповідає bottom-right-radius.
• border-end-start-radius відповідає top-left-radius.
• border-end-end-radius відповідає bottom-left-radius.

Використовуючи ці нові властивості, ви можете визначити радіуси кутів, які семантично пов'язані з потоком контенту, а не з фізичним екраном. Кут «start-start» завжди буде правильним кутом, незалежно від мови чи напрямку тексту.

Практична реалізація: Створення компонента, готового до глобального використання

Теорія — це чудово, але подивімося, як це працює на практиці. Ми створимо простий компонент картки профілю, спочатку використовуючи старі фізичні властивості, а потім переробимо його для використання сучасних логічних властивостей з Рівня 1 та Рівня 2.

Картка матиме зображення, що обтікається з одного боку, заголовок, текст, а також декоративну рамку та заокруглені кути.

«Старий» спосіб: Крихка картка на фізичних властивостях

Ось як ми могли б стилізувати цю картку кілька років тому:

/* --- CSS (Фізичні властивості) --- */

.physical-card {

  width: 300px;

  padding: 20px;

  margin-bottom: 20px;

  border: 1px solid #ccc;

  border-left: 5px solid steelblue;

  border-top-left-radius: 8px;

  border-bottom-left-radius: 8px;

}

.physical-card .avatar {

  float: left;

  width: 80px;

  height: 80px;

  margin-right: 15px;

}

.physical-card h3 {

  margin-top: 0;

  text-align: left;

}

У стандартному англійському LTR-контексті це виглядає добре. Але якщо ми помістимо це всередину контейнера з dir="rtl" або writing-mode: vertical-rl, макет ламається. Декоративна рамка знаходиться не з того боку, аватар — не з того боку, відступ неправильний, а заокруглені кути зміщені.

«Новий» спосіб: Надійна картка на логічних властивостях

Тепер давайте переробимо той самий компонент, використовуючи логічні властивості. Ми використаємо властивості як з Рівня 1, так і нові доповнення з Рівня 2.

/* --- CSS (Логічні властивості) --- */

.logical-card {

  inline-size: 300px;

  padding: 20px; /* `padding` вже є логічним! */

  margin-block-end: 20px;

  border: 1px solid #ccc;

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px; /* Сила Рівня 2! */

  border-end-start-radius: 8px; /* Сила Рівня 2! */

}

.logical-card .avatar {

  float: inline-start; /* Сила Рівня 2! */

  inline-size: 80px;

  block-size: 80px;

  margin-inline-end: 15px;

}

.logical-card h3 {

  margin-block-start: 0;

  text-align: start;

}

Тестування та перевірка

З цим новим CSS ви можете вставити компонент у будь-який контейнер, і він автоматично адаптується.

• У LTR-контексті: Він виглядатиме ідентично до оригінальної фізичної версії.
• У RTL-контексті (dir="rtl"): Аватар буде зміщений праворуч, його відступ буде зліва, декоративна рамка буде праворуч, а текст буде вирівняний по початку (праворуч). Заокруглені кути будуть правильно розташовані зверху-справа та знизу-справа. Це просто працює.
• У вертикальному контексті (writing-mode: vertical-rl): «Ширина» картки (тепер її вертикальний inline-size) буде 300px. Аватар буде зміщений «вгору» (inline-start) з відступом «знизу» (inline-end). Декоративна рамка буде з правого боку (inline-start), а заокруглені кути — зверху-справа та зверху-зліва. Компонент повністю переорієнтувався правильно без жодних медіазапитів чи перевизначень.

Підтримка браузерами та фолбеки

Це все звучить фантастично, але як щодо підтримки браузерами? Гарна новина в тому, що підтримка логічних властивостей Рівня 1 є чудовою у всіх сучасних браузерах. Ви можете і повинні використовувати такі властивості, як margin-inline-start та padding-block, вже сьогодні.

Підтримка новіших функцій Рівня 2 швидко покращується, але ще не є універсальною. Логічні значення для float, clear та resize добре підтримуються. Логічні властивості border-radius є найновішими і все ще можуть бути за експериментальними прапорцями або в останніх версіях браузерів. Як завжди, вам слід звертатися до таких ресурсів, як MDN Web Docs або CanIUse.com, для отримання найактуальніших даних про сумісність.

Стратегії прогресивного покращення

Оскільки CSS розроблений бути стійким, ми можемо легко надати фолбеки для старих браузерів. Каскад гарантує, що якщо браузер не розуміє логічну властивість, він просто проігнорує її та використає фізичну властивість, визначену перед нею.

Ось як ви можете писати CSS з фолбеками:

.card {

  /* Фолбек для старих браузерів */

  border-left: 5px solid darkcyan;

  border-top-left-radius: 8px;

  /* Сучасна логічна властивість, яка перевизначить фолбек */

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px;

}

Цей підхід забезпечує надійний базовий досвід для всіх, водночас надаючи покращений, адаптивний макет для користувачів на сучасних браузерах. Для проєктів, які не потребують підтримки кількох режимів письма, це може бути надмірним. Але для будь-якого глобального застосунку, дизайн-системи чи теми це надійна та перспективна стратегія.

Майбутнє — за логікою: Поза Рівнем 2

Перехід від фізичного до логічного мислення є одним з найважливіших зсувів у сучасному CSS. Він узгоджує нашу мову стилів з реальністю різноманітного, глобального вебу. Він відводить нас від крихких, орієнтованих на екран хаків до стійкого, орієнтованого на контент дизайну.

Чи залишилися ще прогалини? Декілька. Логічні значення для таких властивостей, як background-position або градієнти, все ще обговорюються. Але з випуском Рівня 2 переважна більшість повсякденних завдань з верстки та стилізації тепер може бути виконана за допомогою суто логічного підходу.

Заклик до дії для розробників очевидний: почніть використовувати логічні властивості за замовчуванням. Зробіть inline-size своїм вибором замість width. Використовуйте margin-inline замість того, щоб встановлювати лівий та правий відступи окремо. Це не лише про підтримку різних мов; це про написання кращого, більш стійкого CSS. Компонент, створений з логічними властивостями, за своєю суттю є більш придатним для повторного використання та адаптивним, незалежно від того, чи використовується він у LTR, RTL або вертикальному макеті. Це просто краща інженерія.

Висновок: Прийміть потік

Логічні властивості CSS Рівня 2 — це не просто набір нових функцій; це завершення бачення. Вони надають останні, вирішальні елементи, необхідні для створення макетів, які поважають природний потік свого контенту, яким би цей потік не був. Приймаючи такі властивості, як float: inline-start та border-start-start-radius, ми підносимо нашу майстерність від простого позиціонування коробок на екрані до проєктування справді глобальних, інклюзивних та перспективних веб-досвідів.

Наступного разу, коли ви розпочнете новий проєкт або створюватимете новий компонент, зупиніться, перш ніж написати margin-left. Запитайте себе: "Мені потрібна ліва сторона чи початкова?" Зробивши цей невеликий ментальний зсув, ви зробите свій внесок у створення більш адаптивного та доступного вебу для всіх і всюди.